<template>
    <div class="foot-bar">
        <div class="foot-left">
            <div class="logo">
                <img src="@/assets/images/logo/yksg.svg" class="logo-img" alt="">
                <p class="logo-name">一刻时光</p>
            </div>
            <p class="top-p">一刻时光是本人独自开发，为便于与用户交流的平台</p>
            <p class="top-p">用户将留言便签贴在留言墙上，用户可以自定义便签的颜色和内容属性，不仅可以用于交流，也是一场记录</p>
            <p class="state">
                <span>声明</span>
                <span>备案/许可证</span>
                <span>滇ICP备 2024046924</span>
            </p>
        </div>
        <div class="link">
            <p class="title">链接</p>
            <div class="line-inner">
                <a href="www.gutaofang.com" target="_blank" class="link-name">We</a>
                <a href="www.gutaofang.com" target="_blank" class="link-name">B站</a>
                <a href="www.gutaofang.com" target="_blank" class="link-name">GitHub</a>
                <a href="www.gutaofang.com" target="_blank" class="link-name">Gitee</a>
            </div>
        </div>
        <div class="foot-right">
            <p class="title">打赏</p>
            <div class="right-inner">
                <div class="left-img">
                    <img src="@/assets/images/system/微信支付.png" alt="">
                    <p>微信支付</p>
                </div>
                <div class="right-img">
                    <img src="@/assets/images/system/支付宝支付.png" alt="">
                    <p>支付宝支付</p>
                </div>  
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .foot-bar {
        width: 100%;
        height: 200px;
        background-color: @gray-0;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
    }

    .foot-bar-inner {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .foot-left {
        width: 400px;
    }

    .logo {
        display: flex;
        align-items: center;
        margin: 0 0 24px 0;
    }

    .logo-name {
        font-size: 20px;
        color: @gray-4;
        font-weight: 600;
        margin: 0 0 0 10px;
        color: @gray-4;
    }

    .top-p {
        color: rgba(255, 255, 255, .5);
        font-size: @font-size-12;
        margin: 0 0 8px 0;
        font-weight: 400;
    }

    .state {
        margin: 20px 0 0 0;
    }

    .state span {
        color: rgba(255, 255, 255, .5);
        font-size: @font-size-12;
    }

    .state span:nth-child(n + 2) {
        margin: 0 0 0 10px;
    }

    .link {
        width: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .foot-right {
        width: 400px;
    }

    .link .title {
        color: rgba(255, 255, 255, .5);
        font-size: @font-size-14;
    }

    .line-inner {
        margin: 20px 0 0 0;
    }

    a {
        color: rgba(255, 255, 255, .5);
        text-decoration: none;
        font-size: @font-size-14;
    }

    a:nth-child(n + 2) {
        margin: 0 0 0 15px;
    }

    .foot-right {
        width: 400px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .right-inner {
        display: flex;
        justify-content: center;
        margin: 10px 0 0 0;
    }

    .right-inner img{
        width: 120px;
    }

    .right-img {
        margin: 0 0 0 20px;
    }

    .right-img,
    .left-img {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .left-img p,
    .right-img p {
        color: rgba(255, 255, 255, .5);
        font-size: @font-size-14;
        margin: 10px 0 0 0;
    }

    .title {
        color: rgba(255, 255, 255, .5);
        font-size: @font-size-14;
    }

    .foot-right .title {
        margin: 0 120px 0 0;
    }
</style>